<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
      <el-form-item label="专业" prop="majorId">
        <el-select style="width: 400px" @change="changeMajor" clearable size="mini" v-model="queryParams.majorId">
          <el-option v-for="(v, i) in major_list" :key="i" :value="v.majorId" :label="v.majorName"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select style="width: 400px" clearable size="mini" v-model="queryParams.classId" placeholder="请先选择专业再选择班级">
          <el-option v-for="(v, i) in class_list" :key="i" :value="v.classId" :label="v.className"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名" prop="stuName">
        <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="学号" prop="stuNo">
        <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="applyStatus">
        <el-select size="mini" v-model="queryParams.applyStatus" placeholder="审核状态" clearable>
          <el-option v-for="(v, i) in applyStatus" :key="i" :label="v.label" :value="v.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否转账" prop="isSendMoney">
        <el-select size="mini" v-model="queryParams.isSendMoney" placeholder="是否转账" clearable>
          <el-option :label="'是'" :value="'是'" />
          <el-option :label="'否'" :value="'否'" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="#" align="center" prop="id" />
      <el-table-column label="学号" align="center" prop="stuNo" />
      <el-table-column label="提交人" align="center" prop="stuName" />
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="学年" align="center" prop="stuYearName" />

      <el-table-column label="辅导员姓名" align="center" prop="fdyName" />

      <el-table-column label="提交时间" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学生人数" align="center" prop="classCount" />

      <el-table-column label="申请状态" align="center" width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.audius_detail_type" :value="scope.row.applyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="是否转账" align="center" prop="isSendMoney" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="查看" :visible.sync="lookV" width="70rem">
      <el-form label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item class="look-form-item" label="申请人">
              <el-input readonly v-model="lookForm.stuName"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="班级">
              <el-input readonly v-model="lookForm.className"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="辅导员">
              <el-input readonly v-model="lookForm.fdyName"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="班级人数">
              <el-input readonly v-model="lookForm.classCount"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="身份证号">
              <el-input readonly v-model="lookForm.idCard"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="农行卡号">
              <el-input readonly v-model="lookForm.bankCard"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="开户行">
              <el-input readonly v-model="lookForm.bankAddr"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="所获奖励">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.goodHis"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="主要事迹">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.mainHis"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="佐证材料">
              <Affix @input="handleAffix" v-model="lookForm.testimonyMaterials"></Affix>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!isEmpty(lookForm.isSendMoney)" class="look-form-item" label="是否转账">
              <el-input readonly v-model="lookForm.isSendMoney"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.sendMoneyTime)" class="look-form-item" label="转账时间">
              <el-input readonly v-model="lookForm.sendMoneyTime"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.remark)" class="look-form-item" label="备注">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.remark"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.fdyCmt)" class="look-form-item" label="辅导员意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.fdyCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.xwCmt)" class="look-form-item" label="学院意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.xwCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.jwcCmt)" class="look-form-item" label="学工意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }" v-model="lookForm.jwcCmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { isEmpty } from '@/api/helpFunc'

import { listXwAll } from '@/api/stuCQS/good-class/newClassGoodApply'

import { listEnableYear as listYear } from '@/api/stuCQS/basedata/year'

import { listOwnClass, listOwnMajor } from '@/api/stuCQS/info-fill/cqScore'
import lodash from 'lodash'

import { goodClassApplyStatus as applyStatus } from '@/api/stuCQS/good/audit'
export default {
  name: 'good-class-stu',
  dicts: ['audius_detail_type'],
  data() {
    return {
      applyStatus,
      isEmpty,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      tableData: [],

      lookV: false,
      lookForm: {},

      year_list: [],

      major_list: [],
      class_list: [],
    }
  },
  created() {
    this.listOwnMajor()

    this.getList()
    this.listYear()
  },
  methods: {
    handleExport() {
      this.download(
        'comprehensive/newClassGoodApply/exportXw',
        {
          ...this.queryParams,
        },
        `先进班集体_${new Date().getTime()}.xlsx`
      )
    },
    async listOwnMajor() {
      let res = await listOwnMajor()
      if (res.code == 200) {
        this.major_list = lodash.cloneDeep(res.data)
      }
    },
    async changeMajor(major) {
      if (isEmpty(major)) {
        this.class_list = []
        this.queryParams.classId = null
      } else {
        let res = await listOwnClass(major)
        if (res.code == 200) {
          this.class_list = lodash.cloneDeep(res.data)
        }
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    lookVClick(val) {
      this.lookForm = { ...val }
      this.lookV = true
    },

    async listYear() {
      let res = await listYear()
      if (res.code == 200) {
        this.year_list = [...res.rows]
      }
    },

    async getList() {
      this.loading = true
      let res = await listXwAll(this.queryParams)
      this.loading = false
      if (res.code == 200) {
        this.tableData = [...res.rows]
        this.total = res.total
      }
    },
    handleAffix(affixId) {
      this.lookForm.testimonyMaterials = affixId
    },
  },
}
</script>
<style scoped>
.look-form-item {
  margin-bottom: 1px;
}
</style>
